import React from "react";
import { List } from 'antd-mobile';

const Item = List.Item;
const Brief = Item.Brief;

class ListExample extends React.Component {
  state = {
    disabled: false,
  }

  render() {
    return (<div>
        <style jsx="true">{`
            body,html{
                font-size:62.5%;
            }
            i{
                font-style: normal;
                color: #000;
                margin-left:5px;
            }
            .processed{
                color:red;
                font-size:1.4rem;
            }
            .red{
                display:inline-block;
                width:0.7rem;
                height:0.7rem;
                border-radius:50%;
                background:red;
                margin-right:3px;
                border:2px solid pink;
                vertical-align: middle;
            }
            .leakage-value{
                font-size:1.6rem;
            }
            .leakage-value>span{
                color:red;
                font-size:1.4rem;
            }
            .alarm-time{
                font-size:1.2rem;
            }
            .alarm-time>span{
                color:#111;
            }
        `}</style>
      <List className="my-list">
        <Item multipleLine extra={<div className="processed"><i className="red"></i>待处理</div>}>
          <div className="leakage-value">线缆2漏电值<span>3.5mA</span></div> 
          <Brief><div className="alarm-time">报警时间 <span>2018-11-19 14:23:26</span></div></Brief>
        </Item>
        <Item multipleLine extra={<div className="processed"><i className="red"></i>待处理</div>}>
          <div className="leakage-value">线缆2漏电值<span>3.5mA</span></div> 
          <Brief><div className="alarm-time">报警时间 <span>2018-11-19 14:23:26</span></div></Brief>
        </Item>
      </List>
    </div>);
  }
}


export default ListExample;
